import { Button } from "antd";
import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import bg from "./homebg.png";
export default function Home() {
  let h=window.innerHeight
  let w=window.innerWidth
  useEffect(()=>{
     h=window.innerHeight
     w=window.innerWidth
  },[])
  return    h>w?(
 
    <div
      style={{
        height: h,
        width:w,
        backgroundImage: `url(${bg})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
       overflow:"auto"
      }}
    >
   <div style={{padding:32,display:"flex",flexDirection:"column",alignItems:"center"}}>
<Button  style={{width:"50vw",height:"12vw",fontSize:"5vw",marginBottom:32}}><Link to="/tarot">塔罗牌</Link></Button>
<Button  style={{width:"50vw",height:"12vw",fontSize:"5vw"}}><Link to="/ji">技</Link></Button>
   </div>
    </div>
  ):(<div
    style={{
      height: h,
      width:w,
      backgroundImage: `url(${bg})`,
      backgroundSize: "cover",
      backgroundPosition: "center",
     overflow:"auto"
    }}
  >
 <div style={{padding:32,display:"flex",alignItems:"center"}}>
<Button style={{margin:32}} ><Link to="/tarot">塔罗牌</Link></Button>
<Button style={{margin:32}}><Link to="/ji">技</Link></Button>
 </div>
  </div>)
}
